<template>
  <div>
    <el-dialog
      :title=" paramType=='unUseTaskBook'? '查看任务书':'选择任务书'"
      width="1200px"
      custom-class="select-class-dialog"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
    >
      <ul class="search-bar">
        <li>
            <label>校区：</label>
            <ht-select
                    v-model="search.jsxqid"
                    :options="campusOptions"
                    multiple
                    filterable
            ></ht-select>
        </li>
        <li>
          <label>教学班：</label>
          <ht-input
            v-model="search.jxbmc"
            placeholder="请输入教学班名称"
          ></ht-input>
        </li>
        <li>
          <label>课程名称：</label>
          <ht-input
            v-model="search.kcmc"
            placeholder="请输入课程名称"
          ></ht-input>
        </li>
        <!-- <li>
          <label>课程性质：</label>
          <ht-input
            v-model="search.kcxz"
            placeholder="请输入课程性质"
          ></ht-input>
        </li> -->
        <li>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </li>
        <li v-if="paramType=='unUseTaskBook'">
            <el-button type="primary" @click="handleExport">导出</el-button>
        </li>
      </ul>
      <el-table
        ref="htTable"
        :data="tableData"
        border
        height="450"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="55"></el-table-column>
        <el-table-column label="校区" prop="jsxqmc" align="center">
        </el-table-column>
        <el-table-column label="教学班名称" prop="jxbmc" align="center"  width="330" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="jxbrs"
          label="教学班人数"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column prop="blx" label="班类型" align="center"  width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ getNameByKey(scope.row.blx) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="kcmc"
          label="课程名称"
          align="center"
          width="200" :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="kcxz" label="课程性质" align="center"  width="120">
          <template slot-scope="scope">
            {{ getNameByKey(scope.row.kcxz) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="kspkz"
          label="开始排课周"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zzs"
          label="总周数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zxs"
          label="周学时"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="txs"
          label="总学时"
          align="center"
        ></el-table-column>
<!--        <el-table-column
          prop="llxs"
          label="理论学时"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sjxs"
          label="实践学时"
          align="center"
        ></el-table-column>-->
        <el-table-column prop="skddlx" label="上课地点类型" align="center"   width="150"  :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ getNameByKey(scope.row.skddlx) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pkyq"
          label="排课要求"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="djspkyq"
          label="多教师排课要求"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="zlx"
          label="周类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ycxx"
          width="200"
          label="不排原因"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        background
        :current-page.sync="pageResult.page"
        :page-size="pageResult.pageSize"
        layout="prev, pager, next,sizes"
        :total="pageResult.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <div slot="footer" v-if="paramType!=='unUseTaskBook'">
        <el-button @click="confirm" type="primary">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import course from '@/api/course.js'

export default {
  props: {
    editId: String, paramType: String,
    mapOptions: Array
  },
  data() {
    return {
      selectedList: [],
      search: {
        jxbmc: '',
        kcmc: '',
        kcxz: ''
      },
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      tableData: [],
      campusOptions:[],
    }
  },
  created() {
      this.getCampusOptions()
  },
  methods: {
    getCampusOptions() {
        course.getDicListByKeys('xqdic').then(res => {
            this.campusOptions = res.value.xqdic
        })
    },
    handleExport(){
        let params = this.getParams();
        // params.pageBean.pageSize = -1
        // params.pageBean.showTotal = false;
        course.exportTaskBookList(params,this.paramType)
    },
    handleSearch() {
      this.pageResult.page = 1
      this.getTableData()
    },
    getNameByKey(key) {
      if (!key) {
        return ''
      }
      if (!this.mapOptions) {
        return key
      }
      let obj = this.mapOptions.find(k => {
        return k.key == key
      })
      return obj ? obj.value : key
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    getTableData() {
      let params = this.getParams();
      course.getTaskBookList(params,this.paramType).then(res => {
        this.tableData = res.rows
        this.pageResult.total = res.total
      })
    },
    getParams(){
        let params = {
            isRecord: false,
            pageBean: this.pageResult,
            querys: [],
            recordId: this.editId
        }
        if (this.search.jxbmc) {
            params.querys.push({
                property: 'jxbmc',
                value: this.search.jxbmc,
                group: 'main',
                operation: 'LIKE',
                relation: 'AND'
            })
        }
        if (this.search.jsxqid) {
            params.querys.push({
                property: 'JSXQID',
                value: this.search.jsxqid,
                group: 'main',
                operation: 'IN',
                relation: 'AND'
            })
        }
        if (this.search.kcmc) {
            params.querys.push({
                property: 'kcmc',
                value: this.search.kcmc,
                group: 'main',
                operation: 'LIKE',
                relation: 'AND'
            })
        }
        if (this.search.kcxz) {
            params.querys.push({
                property: 'kcxz',
                value: this.search.kcxz,
                group: 'main',
                operation: 'LIKE',
                relation: 'AND'
            })
        }
        return params;
    },
    confirm() {
      if (!this.selectedList.length) {
        this.$message.info('请至少选择一条数据！')
        return
      }
      let arr = this.selectedList.map(k => {
        return {
          pkjlid: this.editId,
          cslx: 'taskBook',
          csdxid: k.rwsid
        }
      })
      course.saveClassRoomList(arr).then(res => {
        if (res.state) {
          this.$message.success('保存成功!')
          this.$emit('confirm')
          this.dialogVisible = false
        } else {
          this.$message.error(res.message || '接口异常！')
        }
      })
    },
    showDialog() {
      this.selectedList = []
      this.getTableData()
      this.dialogVisible = true
    },
    handleSizeChange(val) {
      //   每页条数
      this.pageResult.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      //   当前页
      this.pageResult.page = val
      this.getTableData()
    },
    getMapOptions() {
        course.getDicListByKeys('aicdic').then(res => {
            this.mapOptions = res.value.aicdic
        })
    },
  }
}
</script>
<style lang="scss" scoped>
.select-class-dialog {
  .search-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      margin-bottom: 16px;
      margin-right: 16px;
    }
  }
  .custom-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
